<template>
    <div class="add-product-and-area">
        <div class="list-item">
            <div class="title">已添加商品
                <el-button @click="showChoiceGoods.show = true">添加商品</el-button>
            </div>
            <elTable :formData="formData" @tableData="getList" ref="dataInfo">
                <el-table-column prop="group" label="产品名称" align="center"></el-table-column>
                <el-table-column prop="group" label="规格" align="center"></el-table-column>
                <el-table-column prop="loginTime" label="批准文号" align="center"></el-table-column>
                <el-table-column prop="loginTime" label="生产厂家" align="center"></el-table-column>
                <el-table-column prop="action" label="操作" align="center" width="200px">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="deleteGoods(scope.row)">移除</el-button>
                    </template>
                </el-table-column>
            </elTable>
        </div>
        <div class="list-item">
            <div class="title">已添加区域
                <el-button @click="showArea.show = true">添加区域</el-button>
            </div>
            <elTable :formData="formData" @tableData="getList" ref="dataInfo">
                <el-table-column prop="group" label="省"></el-table-column>
                <el-table-column prop="group" label="市"></el-table-column>
                <el-table-column prop="group" label="区"></el-table-column>
                <el-table-column prop="action" label="操作" align="center" width="200px">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="deleteGoods(scope.row)">移除</el-button>
                    </template>
                </el-table-column>
            </elTable>
        </div>
        <choice-single-goods :visible="showChoiceGoods"></choice-single-goods>
        <choice-area :visible="showArea"></choice-area>
        <div class="control">
            <el-button type="primary">保存为可销</el-button>
            <el-button type="primary">保存为限销</el-button>
        </div>
    </div>
</template>
<script>
import elTable from "@/components/xForm/elTable"
import choiceSingleGoods from '@/components/Choice/sigleGoods'
import choiceArea from '@/components/Choice/area'
export default {
    name: 'addProductAndArea',
    components: {
        elTable,
        choiceSingleGoods,
        choiceArea
    },
    data () {
        return {
            showChoiceGoods: {
                show: false
            },
            showArea: {
                show: false
            },
            formData: {
                name: "",
                userName: "",
                userStatus: "",
                currentPage: 1,
                pageSize: 10,
            },
        }
    },
    methods: {
        getList(pageNo) {
            let dataInfo = [
                {
                    id: 1,
                    name: "你好",
                    createTime: '1595244696000'
                },
                {
                    id: 2,
                    name: "你好1",
                    createTime: '1595244696000'
                },
            ];
            let total = 10;
            this.$nextTick(() => {
                this.$refs.dataInfo.loadData(dataInfo, total);
            })
        },
        deleteGoods () {

        }
    }
}
</script>
<style lang="scss" scoped>
.add-product-and-area {
    .list-item {
        background: #fff;
        margin-bottom: 16px;
        .title {
            padding: 16px;
            border-bottom: 1px solid #ddd;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }
}
</style>